<template>
  <div class="app-container">

    <el-card class="box-card">
      <h3>编辑</h3>
      <el-form ref="orderCalculationResults" :rules="rules" :model="orderCalculationResults" label-width="150px">
        <el-form-item label="原料批号1" prop="rawNumber1">
          <el-input v-model="orderCalculationResults.rawNumber1"/>
        </el-form-item>
        <el-form-item label="原料批号2" prop="rawNumber2">
          <el-input v-model="orderCalculationResults.rawNumber2"/>
        </el-form-item>
        <el-form-item label="核素浓度" prop="rawConcentration">
          <el-input v-model="orderCalculationResults.rawConcentration">
            <!--<template slot="append">元</template>-->
          </el-input>
        </el-form-item>
        <el-form-item label="测量时间" prop="measureTine">
          <el-input v-model="orderCalculationResults.measureTine">
            <!--<template slot="append">元</template>-->
          </el-input>
        </el-form-item>
        <el-form-item label="口服液浓度" prop="oralConcentration">
          <el-input v-model="orderCalculationResults.oralConcentration">
            <!--<template slot="append">元</template>-->
          </el-input>
        </el-form-item>
        <el-form-item label="核素取样时间" prop="rawSampleTime">
          <el-input v-model="orderCalculationResults.rawSampleTime">
            <!--<template slot="append">元</template>-->
          </el-input>
        </el-form-item>
        <el-form-item label="产品取样时间" prop="oralSampleTime">
          <el-input v-model="orderCalculationResults.oralSampleTime">
            <!--<template slot="append">元</template>-->
          </el-input>
        </el-form-item>
        <el-form-item label="产品生产体积" prop="productCapacity">
          <el-input v-model="orderCalculationResults.productCapacity"/>
        </el-form-item>
        <el-form-item label="产品活度" prop="productActivity">
          <el-input v-model="orderCalculationResults.productActivity"/>
        </el-form-item>
        <!--<el-form-item label="检定单位" prop="verfier">
          <el-input v-model="orderCalculationResults.verfier"/>
        </el-form-item>
        <el-form-item label="证书编号" prop="certificateNo">
          <el-input v-model="orderCalculationResults.certificateNo"/>
        </el-form-item>
        <el-form-item label="检定日期" prop="verfyDate">
          <el-date-picker v-model="orderCalculationResults.verfyDate" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="检定周期" prop="vertificationCycle">
          <el-input v-model="orderCalculationResults.vertificationCycle"/>
        </el-form-item>
        <el-form-item label="校准/检定/自校" prop="orderCalculationResultsStatus">
          <el-radio-group v-model="orderCalculationResults.orderCalculationResultsStatus">
            <el-radio :label="true">校准</el-radio>
            <el-radio :label="false">检定</el-radio>
            <el-radio :label="false">自校</el-radio>
          </el-radio-group>
        </el-form-item>-->
        <!--<el-form-item label="责任人" prop="responsiblePerson">
          <el-input v-model="orderCalculationResults.responsiblePerson">
            &lt;!&ndash;<template slot="append">元</template>&ndash;&gt;
          </el-input>
        </el-form-item>-->
        <!--<el-form-item label="测量范围/精度" prop="measuringRange">
          <el-input v-model="orderCalculationResults.measuringRange">
            &lt;!&ndash;<template slot="append">元</template>&ndash;&gt;
          </el-input>
        </el-form-item>-->
        <!--<el-form-item label="型号规格" prop="orderCalculationResultsModel">
          &lt;!&ndash;<el-input v-model="orderCalculationResults.draftsTime"/>&ndash;&gt;
          <el-date-picker v-model="orderCalculationResults.orderCalculationResultsModel" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择日期"/>
        </el-form-item>-->
        <!--<el-form-item label="检定周期" prop="vertificationCycle">
          <el-input v-model="orderCalculationResults.vertificationCycle">
            &lt;!&ndash;<template slot="append">元</template>&ndash;&gt;
          </el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="orderCalculationResults.status">
            <el-radio :label="true">正常</el-radio>
            <el-radio :label="false">待检</el-radio>
          </el-radio-group>
        </el-form-item>-->

        <!--<el-form-item label="商品图片">
          <el-upload
            :headers="headers"
            :action="uploadPath"
            :show-file-list="false"
            :on-success="uploadPicUrl"
            class="avatar-uploader"
            accept=".jpg,.jpeg,.png,.gif">
            <img v-if="orderCalculationResults.picUrl" :src="orderCalculationResults.picUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
        </el-form-item>-->

        <!--<el-form-item label="宣传画廊">
          <el-upload
            :action="uploadPath"
            :headers="headers"
            :limit="5"
            :file-list="galleryFileList"
            :on-exceed="uploadOverrun"
            :on-success="handleGalleryUrl"
            :on-remove="handleRemove"
            multiple
            accept=".jpg,.jpeg,.png,.gif"
            list-type="picture-card">
            <i class="el-icon-plus"/>
          </el-upload>
        </el-form-item>-->

        <!--<el-form-item label="商品单位">
        <el-input v-model="orderCalculationResults.unit" placeholder="件 / 个 / 盒"/>
      </el-form-item>-->
        <!--<el-form-item label="所属分类">
          <el-cascader :options="categoryList" v-model="categoryIds" expand-trigger="hover" @change="handleCategoryChange"/>
        </el-form-item>-->

        <!--<el-form-item label="所属品牌商">
          <el-select v-model="orderCalculationResults.brandId">
            <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>-->

        <!--<el-form-item label="商品简介">
          <el-input v-model="orderCalculationResults.brief"/>
        </el-form-item>-->

        <!--<el-form-item label="文档说明">
          <editor :init="editorInit" v-model="orderCalculationResults.detail"/>
        </el-form-item>-->
      </el-form>
    </el-card>

    <!--<el-card class="box-card">
      <h3>修改记录</h3>
      <el-button :plain="true" type="primary" @click="handleSpecificationShow">添加</el-button>

      <el-table :data="mods">
        <el-table-column property="specification" label="规格名" />
        <el-table-column property="value" label="规格值" >
          <template slot-scope="scope">
            <el-tag type="primary">
              {{ scope.row.value }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column property="picUrl" label="规格图片">
          <template slot-scope="scope">
            <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40">
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="handleSpecificationDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="specVisiable" title="设置规格">
        <el-form ref="specForm" :rules="rules" :model="specForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
          <el-form-item label="规格名" prop="specification">
            <el-input v-model="specForm.specification"/>
          </el-form-item>
          <el-form-item label="规格值" prop="value">
            <el-input v-model="specForm.value"/>
          </el-form-item>
          <el-form-item label="规格图片" prop="picUrl">
            <el-upload
              :headers="headers"
              :action="uploadPath"
              :show-file-list="false"
              :on-success="uploadSpecPicUrl"
              class="avatar-uploader"
              accept=".jpg,.jpeg,.png,.gif">
              <img v-if="specForm.picUrl" :src="specForm.picUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="specVisiable = false">取消</el-button>
          <el-button type="primary" @click="handleSpecificationAdd">确定</el-button>
        </div>
      </el-dialog>
    </el-card>-->

    <!--<el-card class="box-card">
      <h3>商品库存</h3>
      <el-table :data="products">
        <el-table-column property="value" label="货品规格" >
          <template slot-scope="scope">
            <el-tag v-for="tag in scope.row.specifications" :key="tag">
              {{ tag }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column property="price" width="100" label="货品售价"/>
        <el-table-column property="number" width="100" label="货品数量"/>
        <el-table-column property="url" width="100" label="货品图片">
          <template slot-scope="scope">
            <img v-if="scope.row.url" :src="scope.row.url" width="40">
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleProductShow(scope.row)">设置</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="productVisiable" title="设置货品">
        <el-form ref="productForm" :model="productForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
          <el-form-item label="货品规格列" prop="specifications">
            <el-tag v-for="tag in productForm.specifications" :key="tag">
              {{ tag }}
            </el-tag>
          </el-form-item>
          <el-form-item label="货品售价" prop="price">
            <el-input v-model="productForm.price"/>
          </el-form-item>
          <el-form-item label="货品数量" prop="number">
            <el-input v-model="productForm.number"/>
          </el-form-item>
          <el-form-item label="货品图片" prop="url">
            <el-upload
              :headers="headers"
              :action="uploadPath"
              :show-file-list="false"
              :on-success="uploadProductUrl"
              class="avatar-uploader"
              accept=".jpg,.jpeg,.png,.gif">
              <img v-if="productForm.url" :src="productForm.url" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="productVisiable = false">取消</el-button>
          <el-button type="primary" @click="handleProductEdit">确定</el-button>
        </div>
      </el-dialog>
    </el-card>-->

    <!--<el-card class="box-card">
      <h3>商品参数</h3>
      <el-button :plain="true" type="primary" @click="handleAttributeShow">添加</el-button>
      <el-table :data="attributes">
        <el-table-column property="attribute" label="商品参数名称"/>
        <el-table-column property="value" label="商品参数值"/>
        <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="handleAttributeDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="attributeVisiable" title="设置商品参数">
        <el-form ref="attributeForm" :model="attributeForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
          <el-form-item label="商品参数名称" prop="attribute">
            <el-input v-model="attributeForm.attribute"/>
          </el-form-item>
          <el-form-item label="商品参数值" prop="value">
            <el-input v-model="attributeForm.value"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="attributeVisiable = false">取消</el-button>
          <el-button type="primary" @click="handleAttributeAdd">确定</el-button>
        </div>
      </el-dialog>
    </el-card>-->

    <div class="op-container">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleEdit">更新</el-button>
    </div>
  </div>
</template>

<style>
.el-card {
  margin-bottom: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.input-new-keyword {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
</style>

<script>
// eslint-disable-next-line no-unused-vars
import { detailorderCalculationResultss, editorderCalculationResultss } from '@/api/business/orderCalculationResults'
import { createStorage, uploadPath } from '@/api/business/storage'
import Editor from '@tinymce/tinymce-vue'
import { MessageBox } from 'element-ui'
import { getToken } from '@/utils/auth'

export default {
  name: 'orderCalculationResultsedit',
  components: { Editor },
  data() {
    return {
      uploadPath,
      newKeywordVisible: false,
      newKeyword: '',
      keywords: [],
      galleryFileList: [],
      orderCalculationResults: { gallery: [] },
      specVisiable: false,
      specForm: { specification: '', value: '', picUrl: '' },
      specifications: [{ specification: '规格', value: '标准', picUrl: '' }],
      mods: [
        { id: 0, specifications: ['标准'], price: 0.0, number: 0, url: '' }
      ],
      /* attributeVisiable: false,*/
      /* attributeForm: { attribute: '', value: '' },
      attributes: [],*/
      rules: {
        batchNumber: [
          { required: true, message: '产品批号不能为空', trigger: 'blur' }
        ],
        productActivity: [{ required: true, message: '产品总活度不能为空', trigger: 'blur' }],
        productCapacity: [{ required: true, message: '产品总体积不能为空', trigger: 'blur' }]
      },
      editorInit: {
        language: 'zh_CN',
        convert_urls: false,
        plugins: [
          'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
        ],
        toolbar: [
          'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
          'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
        ],
        images_upload_handler: function(blobInfo, success, failure) {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          createStorage(formData)
            .then(res => {
              success(res.data.data.url)
            })
            .catch(() => {
              failure('上传失败，请重新上传')
            })
        }
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Dts-Admin-Token': getToken()
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init: function() {
      if (this.$route.query.id == null) {
        return
      }

      const orderCalculationResultsId = this.$route.query.id
      detailorderCalculationResultss(orderCalculationResultsId).then(response => {
        this.orderCalculationResults = response.data.data.orderCalculationResults
        /* this.specifications = response.data.data.specifications*/
        /* for (var i = 0; i < this.orderCalculationResults.gallery.length; i++) {
          this.galleryFileList.push({
            url: this.orderCalculationResults.gallery[i]
          })
        }*/
        const keywords = response.data.data.orderCalculationResults.keywords
        if (keywords !== null) {
          this.keywords = keywords.split(',')
        }
      })

      /* listCatAndBrand().then(response => {
        this.categoryList = response.data.data.categoryList
        this.brandList = response.data.data.brandList
      })*/
    },
    /* handleCategoryChange(value) {
      this.orderCalculationResults.categoryId = value[value.length - 1]
    },*/
    handleCancel: function() {
      this.$router.push({ path: '/orderCalculationResults/list' })
    },
    handleEdit: function() {
      const finalorderCalculationResults = {
        orderCalculationResults: this.orderCalculationResults
        /* specifications: this.specifications,
        products: this.products,
        attributes: this.attributes*/
      }
      editorderCalculationResultss(finalorderCalculationResults)
        .then(response => {
          this.$notify.success({
            title: '成功',
            message: '创建成功'
          })
          this.$router.push({ path: '/orderCalculationResults/list' })
        })
        .catch(response => {
          MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
            confirmButtonText: '确定',
            type: 'error'
          })
        })
    },
    handleClose(tag) {
      this.keywords.splice(this.keywords.indexOf(tag), 1)
      this.orderCalculationResults.keywords = this.keywords.toString()
    },
    showInput() {
      this.newKeywordVisible = true
      this.$nextTick(_ => {
        this.$refs.newKeywordInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const newKeyword = this.newKeyword
      if (newKeyword) {
        this.keywords.push(newKeyword)
        this.orderCalculationResults.keywords = this.keywords.toString()
      }
      this.newKeywordVisible = false
      this.newKeyword = ''
    },
    uploadPicUrl: function(response) {
      this.orderCalculationResults.picUrl = response.data.url
    },
    uploadOverrun: function() {
      this.$message({
        type: 'error',
        message: '上传器材个数超出限制!最多上传5张图片!'
      })
    },
    handleGalleryUrl(response, file, fileList) {
      if (response.errno === 0) {
        this.orderCalculationResults.gallery.push(response.data.url)
      }
    },
    handleRemove: function(file, fileList) {
      for (var i = 0; i < this.orderCalculationResults.gallery.length; i++) {
        // 这里存在两种情况
        // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
        //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
        // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
        var url
        if (file.response === undefined) {
          url = file.url
        } else {
          url = file.response.data.url
        }

        if (this.orderCalculationResults.gallery[i] === url) {
          this.orderCalculationResults.gallery.splice(i, 1)
        }
      }
    },
    specChanged: function(label) {
      if (label === false) {
        this.specifications = [
          { specification: '规格', value: '标准', picUrl: '' }
        ]
        this.products = [
          { id: 0, specifications: ['标准'], price: 0.0, number: 0, url: '' }
        ]
      } else {
        this.specifications = []
        this.products = []
      }
    },
    uploadSpecPicUrl: function(response) {
      this.specForm.picUrl = response.data.url
    },
    handleSpecificationShow() {
      this.specForm = { specification: '', value: '', picUrl: '' }
      this.specVisiable = true
    },
    handleSpecificationAdd() {
      var index = this.specifications.length - 1
      for (var i = 0; i < this.specifications.length; i++) {
        const v = this.specifications[i]
        if (v.specification === this.specForm.specification) {
          index = i
        }
      }

      this.specifications.splice(index + 1, 0, this.specForm)
      this.specVisiable = false

      this.specToProduct()
    },
    handleSpecificationDelete(row) {
      const index = this.specifications.indexOf(row)
      this.specifications.splice(index, 1)
      this.specToProduct()
    },
    specToProduct() {
      if (this.specifications.length === 0) {
        return
      }
      // 根据specifications创建临时规格列表
      var specValues = []
      var spec = this.specifications[0].specification
      var values = []
      values.push(0)

      for (var i = 1; i < this.specifications.length; i++) {
        const aspec = this.specifications[i].specification

        if (aspec === spec) {
          values.push(i)
        } else {
          specValues.push(values)
          spec = aspec
          values = []
          values.push(i)
        }
      }
      specValues.push(values)

      // 根据临时规格列表生产货品规格
      // 算法基于 https://blog.csdn.net/tyhj_sf/article/details/53893125
      var productsIndex = 0
      var products = []
      var combination = []
      var n = specValues.length
      for (var s = 0; s < n; s++) {
        combination[s] = 0
      }
      var index = 0
      var isContinue = false
      do {
        var specifications = []
        for (var x = 0; x < n; x++) {
          var z = specValues[x][combination[x]]
          specifications.push(this.specifications[z].value)
        }
        products[productsIndex] = {
          id: productsIndex,
          specifications: specifications,
          price: 0.0,
          number: 0,
          url: ''
        }
        productsIndex++

        index++
        combination[n - 1] = index
        for (var j = n - 1; j >= 0; j--) {
          if (combination[j] >= specValues[j].length) {
            combination[j] = 0
            index = 0
            if (j - 1 >= 0) {
              combination[j - 1] = combination[j - 1] + 1
            }
          }
        }
        isContinue = false
        for (var p = 0; p < n; p++) {
          if (combination[p] !== 0) {
            isContinue = true
          }
        }
      } while (isContinue)

      this.products = products
    },
    handleProductShow(row) {
      this.productForm = Object.assign({}, row)
      this.productVisiable = true
    },
    uploadProductUrl: function(response) {
      this.productForm.url = response.data.url
    },
    handleProductEdit() {
      for (var i = 0; i < this.products.length; i++) {
        const v = this.products[i]
        if (v.id === this.productForm.id) {
          this.products.splice(i, 1, this.productForm)
          break
        }
      }
      this.productVisiable = false
    },
    handleAttributeShow() {
      this.attributeForm = {}
      this.attributeVisiable = true
    },
    handleAttributeAdd() {
      this.attributes.unshift(this.attributeForm)
      this.attributeVisiable = false
    },
    handleAttributeDelete(row) {
      const index = this.attributes.indexOf(row)
      this.attributes.splice(index, 1)
    }
  }
}
</script>
